<template>
  <uni-nav-bar title="预存车用尿素" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{conut}}</view>
  <view class="package" v-if="locaInfor">
    <view class="space-between" style="font-size: 24rpx;margin-bottom:20rpx;">
      <view>{{locaInfor.name}}地区：{{unitPrice}}元/吨</view>
      <view @click="areaOpen()">更多地区 <uni-icons type="forward" size="15"></uni-icons></view>
    </view>
    <view class="space-between" style="flex-wrap: wrap;">
      <view class="column active" v-for="(item,index) in list" :key="item.id"
        :style="{background:index===active?'#1D8DFF':'',color:index===active?'#fff':''}" @click="change(index)">
        <view>{{item.text}}</view>
        <view>{{item.amount}}公斤</view>
      </view>
      <view class="column active" :style="{background:2===active?'#1D8DFF':'',color:2===active?'#fff':''}"
        @click="change(2)">
        <view>自定义</view>
      </view>
    </view>
  </view>
  <view class="package space-between" style="min-height:100rpx" v-if="amountInfor">
    <view>{{amountInfor.text}}</view>
    <view>溶液存量：{{amountInfor.amount}}公斤</view>
  </view>
  <view class="but" @click="orders()">微信支付</view>
  <!-- 地区价 -->
  <areaList ref="area"></areaList>
  <!-- 自定义价格 -->
  <CustomInput ref="CustomInputRef" @moneyInfo="moneyInfo" :fill_price="fill_price" @delFilling="delFilling"
    @sureFilling="sureFilling" type="area"></CustomInput>
  <!-- 获取当前经纬度 -->
  <Lotlats @position="position"></Lotlats>
</template>

<script setup lang="ts">
  import { navBack, redirectTo } from '@/utils/navigator';
  import CustomInput from '@c/canCode/customInput.vue';
  import { toPublish } from '@mqtt';
  import Lotlats from '@c/team/Lotlat.vue';
  import { authorMe } from '@/gql/user';
  import { getDefaultAmountRechargePrice, getAmountRechargePriceGroup, getPinRechargePriceGroup, jisuanPinRechargePrice } from '@/gql/warehouse';
  import { ref } from 'vue';
  import { showLoading, showToast, errorToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  import areaList from '@c/account/area.vue';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  const driver_id = getDriverID();
  const active = ref(0)
  const area = ref(null)
  const num = ref() //自定义加注金额
  const list = ref([])
  const amount_id = ref()
  // refs
  const CustomInputRef = ref(null);
  const locaInfor = ref()
  let longitude = 0; //纬度
  let latitude = 0; //经度
  const unitPrice = ref()
  const fill_price = ref()
  const conut = ref()

  const amountInfor = ref()
  /**
   * 获取当前城市信息
   * @param {Number} lat 当前位置的纬度
   * @param {Number} lot 当前位置的经度
   */
  function position(lats : number, lots : number) {
    longitude = lots;
    latitude = lats;
    showLoading()
    const payload = {
      query: getDefaultAmountRechargePrice,
      variables: {
        longitude,
        latitude,
        driver_id
      },
    };
    toPublish(
      'ql/driver/getDefaultAmountRechargePrice',
      payload,
      (obj : any) => {
        const { getDefaultAmountRechargePrice } = obj.data;
        locaInfor.value = getDefaultAmountRechargePrice
        amount_id.value = getDefaultAmountRechargePrice.id
        init()
        groupList()
      }
    );
  }
  function init() {
    showLoading()
    const payload = {
      query: getAmountRechargePriceGroup,
      variables: {
        id: Number(amount_id.value)
      },
    };
    toPublish(
      'ql/driver/getAmountRechargePriceGroup',
      payload,
      (obj : any) => {
        const { getAmountRechargePriceGroup } = obj.data;
        unitPrice.value = getAmountRechargePriceGroup && getAmountRechargePriceGroup.length > 0 ? getAmountRechargePriceGroup[0].money : '--'
      }
    );
  }
  function groupList() {
    showLoading()
    const payload = {
      query: getPinRechargePriceGroup,
      variables: {
        id: Number(amount_id.value)
      },
    };
    toPublish(
      'ql/driver/getPinRechargePriceGroup',
      payload,
      (obj : any) => {
        const { getPinRechargePriceGroup } = obj.data;
        list.value = getPinRechargePriceGroup
        fill_price.value = getPinRechargePriceGroup[0].price
        amountInfor.value = getPinRechargePriceGroup[0]
      }
    );
  }
  function change(num : number) {
    active.value = num
    if (num === 2) {
      CustomInputRef.value.open()
    } else {
      amountInfor.value = list.value[num]
    }
  }
  /**
   * 计算金额
   * @param {Object} nums  输入金额信息
   */
  function moneyInfo(nums : any) {
    const Fills = nums.__v_isShallow === false ? 0 : nums;
    num.value = Fills ? Number(Fills) : 0;
    console.log(num.value + '自定义加注金额')
    showLoading()
    const payload = {
      query: jisuanPinRechargePrice,
      variables: {
        id: Number(amount_id.value),
        money: num.value
      },
    };
    toPublish(
      'ql/driver/jisuanPinRechargePrice',
      payload,
      (obj : any) => {
        const { jisuanPinRechargePrice } = obj.data;
        amountInfor.value = jisuanPinRechargePrice
      }
    );
  }
  swpd()
  function swpd() {
    showLoading('加载中');
    const payload = {
      query: authorMe,
      variables: {
        code: 'swpd',
      },
    };
    toPublish('ql/driver/getMyblock', payload, (obj : any) => {
      const { data } = obj;
      conut.value = data.get_myblock.content
    });
  }
  //提交订单
  function orders() {
    showLoading()
    const payload = {
      driver_id,
      city_id: amount_id.value,
      method: 'mp',
      amount: amountInfor.value.amount
    };
    toPublish(
      'driver/addAmountRechargeOrder',
      payload, submit);
  }
  //提交支付
  function submit(obj : any) {
    if (obj.code !== 1) {
      errorToast(obj.msg)
      return
    }
    showLoading()
    const payload = {
      order_id: obj.data.order_id,
      method: 'mp',
    };
    toPublish(
      'driver/payAmountRechargeOrder',
      payload, weach);
  }
  /**
   * 微信支付
   */
  function weach(num : any) {
    showLoading();
    WeixinJSBridge.invoke('getBrandWCPayRequest', num.data, function (res) {
      switch (res.err_msg) {
        case 'get_brand_wcpay_request:ok':
          showToast('支付成功');
          showLoading()
          setTimeout(() => {
            redirectTo('together/togetherList')
            userInfo.Physicalamounte(driver_id);
          }, 1500);
          break;
        case 'get_brand_wcpay_request:cancel':
          errorToast('取消支付 请稍后重试');
          break;
        case 'get_brand_wcpay_request:fail':
          errorToast('支付失败 请稍后重试');
          break;
      }
    });
  }
  /**
   * 确认自定义输入信息
   */
  function sureFilling() {
    CustomInputRef.value.close();
  }
  /**
   * 取消自定义输入
   */
  function delFilling() {
    CustomInputRef.value.close();
  }
  // 地区价弹框
  function areaOpen() {
    area.value.open()
  }
</script>
<style scoped lang="less">
  .active {
    width: 210rpx;
    height: 96rpx;
    border: 1px solid #1F93FF;
    border-radius: 10rpx;
    text-align: center;
    color: #1D8DFF;
    margin: 10rpx 0px;

    view:nth-of-type(2) {
      font-size: 24rpx;
    }
  }

  .but {
    width: 652rpx;
    height: 91rpx;
    background: #1D8DFF;
    border-radius: 10rpx;
    text-align: center;
    line-height: 91rpx;
    color: #fff;
    margin: 40rpx auto 0px;
  }
</style>